<script lang="tsx">
  import { defineComponent, unref, computed } from 'vue';
  import { Button } from 'ant-design-vue';
  import { buttonProps } from './props';
  import Icon from '/@/components/Icon/src/Icon.vue';

  export default defineComponent({
    name: 'AButton',
    inheritAttrs: false,
    props: buttonProps,
    setup(props, { attrs, slots }) {
      const getButtonClass = computed(() => {
        const { color, disabled } = props;
        return [
          {
            [`ant-btn-${color}`]: !!color,
            [`is-disabled`]: disabled,
          },
        ];
      });
      const getBindValue = computed(() => ({ ...unref(attrs), ...props }));

      const defaultSlot = () => (
        <span>
          {props.preIcon ? <Icon icon={props.preIcon} size={props.iconSize} /> : ''}
          {props.text || slots.default?.()}
          {props.postIcon ? <Icon icon={props.postIcon} size={props.iconSize} /> : ''}
        </span>
      );

      return () => {
        return (
          <Button {...getBindValue.value} class={getButtonClass.value} onClick={props.onClick}>
            {{ default: () => defaultSlot() }}
          </Button>
        );
      };
    },
  });
</script>

<style lang="less" scoped>
  .ant-btn-text:not(:disabled):hover {
    background: transparent;
  }
</style>
